$form-error-color: var(--rz-danger) !default;
$form-error-font-size: 0.75rem !default;
$form-group-margin-bottom: 1.5rem !default; // Bootstrap override
$validator-background-color: var(--rz-danger) !default;
$validator-color: var(--rz-text-contrast-color) !default;
$validator-shadow: 0 6px 14px 0 rgba($rz-danger, 0.3) !default;
$validator-text-padding: 0 !default;
$validator-padding: 0.25rem 0.5rem !default;
$validator-pointer-size: 0.375rem !default;
$validator-transform: translateY(12px) !default;

// Forms CSS variables

:root {
  --rz-form-error-color: #{$form-error-color};
  --rz-form-error-font-size: #{$form-error-font-size};
  --rz-form-group-margin-bottom: #{$form-group-margin-bottom};
  --rz-validator-background-color: #{$validator-background-color};
  --rz-validator-color: #{$validator-color};
  --rz-validator-shadow: #{$validator-shadow};
  --rz-validator-text-padding: #{$validator-text-padding};
  --rz-validator-padding: #{$validator-padding};
  --rz-validator-pointer-size: #{$validator-pointer-size};
  --rz-validator-transform: #{$validator-transform};
}

.rz-messages-error {
  display: inline-block;
  color: var(--rz-form-error-color);
  font-size: var(--rz-form-error-font-size);
  padding: var(--rz-validator-text-padding);
}

.rz-message-popup {
  position: absolute;
  background-color: var(--rz-validator-background-color);
  transform: var(--rz-validator-transform);
  box-shadow: var(--rz-validator-shadow);
  padding: var(--rz-validator-padding);
  border-radius: var(--rz-border-radius);
  color: var(--rz-validator-color);
  pointer-events: none;

  &:before {
    content: '';
    border: var(--rz-validator-pointer-size) solid transparent;
    border-bottom-color: var(--rz-validator-background-color);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(var(--rz-validator-pointer-size), -100%);
  }
}
